/*  header-comment
/*  author : bjh
/*  date   : 2017-11-10
*/

import React, { Component } from "react";
import PropTypes from "prop-types";


//components
import SmartStack from "../../components/LineChart/smartStack.jsx";
import SmartPie from "../../components/LineChart/smartPie.jsx";
import SmartStackWS from "../../components/LineChart/smartStackWS.jsx"
export default class Chart extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let stackColor = '#3296FA',
            margin = [20, 20, 20, 20],
            width = document.body.clientWidth,
            height = 200,
            stackData = [
                { "yAxisData": 13, "xAxisData": "tokyo", "name": "tokyo"},
                { "yAxisData": 8, "xAxisData": "newYork", "name": "newYork" },
                { "yAxisData": 8, "xAxisData": "berlin", "name": "berlin" }
            ],
            pieData = [
                { a: '1', b: 0.3, c: '1' },
                { a: '1', b: 0.3, c: '2' },
                { a: '1', b: 0.4, c: '3' }
            ],
            stackDataWS = [
                { "yAxisData": 10, "xAxisData": "tokyo", "name": "tokyo"},
                { "yAxisData": 4, "xAxisData": "newYork", "name": "newYork" },
                { "yAxisData": 3, "xAxisData": "berlin", "name": "berlin" },
                { "yAxisData": 3, "xAxisData": "berlin1", "name": "berlin1" },
                { "yAxisData": 3, "xAxisData": "berlin2", "name": "berlin2" },
                { "yAxisData": 3, "xAxisData": "berlin3", "name": "berlin3" },
                { "yAxisData": 3, "xAxisData": "berlin4", "name": "berlin4" },
                { "yAxisData": 3, "xAxisData": "berlin5", "name": "berlin5" },
                { "yAxisData": 3, "xAxisData": "berlin6", "name": "berlin6" }
            ];
        return (
            <div className="chart-examples">
                图表类库展示
                <div>
                    <SmartStack 
                        width={width}
                        height={height}
                        margin={margin}
                        chartData={stackData}
                    />
                    <SmartPie
                        width={width}
                        height={height}
                        margin={margin}
                        chartData={pieData}
                    />
                    <SmartPie 
                        width={width}
                        height={height}
                        margin={margin}
                        chartData={pieData}
                    />
                    <SmartStackWS 
                        height={height}
                        margin={margin}
                        chartData={stackDataWS}
                    />
                </div>
            </div>
        );
    }
}
